<template>
    <div class="flex-container" :style="{ height: clientHeight + 'px' }">
        <div class="title">PDF合并</div>
        <el-upload
            ref="upload"
            drag
            action="-"
            accept="application/pdf"
            multiple
            :auto-upload="false"
            :file-list="fileList"
            :on-change="handleChange"
            :on-remove="handleRemove"
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <div>
            <el-button @click="handleBack" size="medium" round style="margin-top: 25px">返回主页</el-button>
            <el-button type="primary" @click="handleMerge" size="medium" round style="margin-top: 25px"
                >合&nbsp;&nbsp;&nbsp;&nbsp;并</el-button
            >
        </div>
    </div>
</template>

<script>
import { PDFDocument } from 'pdf-lib'
import saveAs from 'file-saver'
export default {
    data() {
        return {
            clientHeight: document.documentElement.clientHeight || document.body.clientHeight,
            fileList: []
        }
    },
    methods: {
        async embedPdfPages() {
            const mergedPdf = await PDFDocument.create()
            for (let i = 0; i < this.fileList.length; i++) {
                let file = this.fileList[i]
                let url = URL.createObjectURL(file.raw)
                const arrayBuffer = await fetch(url).then(res => res.arrayBuffer())
                const pdf = await PDFDocument.load(arrayBuffer)
                const copyPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices())
                copyPages.forEach(page => mergedPdf.addPage(page))
                URL.revokeObjectURL(url)
            }
            const pdfBytes = await mergedPdf.save()
            let blob = new Blob([pdfBytes])
            saveAs(blob, 'pdf_merge.pdf')
            this.$refs.upload.clearFiles()
        },
        handleBack() {
            this.$router.replace('/')
        },
        handleChange(file, fileList) {
            this.fileList = fileList
        },
        handleRemove(file, fileList) {
            this.fileList = fileList
        },
        handleBack() {
            this.$router.replace('/')
        },
        handleMerge() {
            if (this.fileList.length === 0) {
                this.$message.error('请上传PDF文件')
            } else {
                this.embedPdfPages()
            }
        }
    }
}
</script>

<style scoped>
.flex-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.el-button--primary {
    background-color: #505587;
    border-color: #505587;
}
.el-upload-dragger .el-upload__text em {
    color: #505587;
}
.title {
    font-size: 24px;
    line-height: 34px;
    color: #33333b;
    font-weight: 600;
    margin-bottom: 25px;
}
</style>
